<template>
  <div class="agentcontent no-scroll-container">
    <div v-if="select" class="agent">
      <!-- 头部信息 -->
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        "
      >
        <ul class="agent-header" style="width: 100%">
          <li
            style="
              margin-right: 12px;
              font-size: 18px;
              font-weight: 500;
              color: var(--color-text-1);
              flex: 1;
              min-width: 0;
            "
          >
            <OverflowText :text="select.serviceItemTitle" :maxWidth="''" />
          </li>
          <li
            style="
              margin-right: 12px;
              display: flex;
              align-items: center;
              min-width: 0;
            "
          >
            <img
              style="width: 20px; height: 20px; margin-right: 4px"
              src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
            />
            <div
              style="
                font-size: 14px;
                color: var(--color-text-3);
                font-weight: 400;
                min-width: 0;
              "
            >
              <OverflowText
                style="
                  font-size: 14px;
                  line-height: 14px;
                  color: var(--color-text-1);
                  padding-left: 5px;
                "
                :text="select.createName"
                :maxWidth="''"
              />
            </div>
          </li>
          <li style="margin-right: 24px">
            <div
              style="
                display: flex;
                align-items: center;
                font-size: 14px;
                color: var(--color-text-3);
                font-weight: 400;
                line-height: 16px;
              "
            >
              <div>发起于</div>
              <div style="padding-left: 5px">
                {{ dateFormatter(select.createTime) }}
              </div>
            </div>
          </li>
          <li style="line-height: 16px">
            <div style="display: flex; align-items: center">
              <div
                style="
                  font-size: 14px;
                  color: var(--color-text-3);
                  line-height: 16px;
                  font-weight: 400;
                "
              >
                节点名称:
              </div>
              <div
                style="
                  color: var(--color-text-1);
                  padding-left: 5px;
                  margin-top: 0px;
                  min-width: 0;
                "
              >
                <div class="syletag">
                  <OverflowText
                    style="
                      background: var(--color-warning-1);
                      line-height: 18px;
                    "
                    color="var(--color-warning-6)"
                    :text="select.nodeName"
                    :maxWidth="''"
                  />
                </div>
              </div>
            </div>
          </li>
        </ul>
        <a-tooltip
          v-if="approve?.log && approve.log.length > 0 && !approveShow"
          :content="'展开上一节点处理结果'"
        >
          <div class="expand" @click="$emit('toggle-approve')">
            详情
            <svg
              class="icon"
              style="font-size: 12px; line-height: 20px"
              aria-hidden="true"
            ></svg>
          </div>
        </a-tooltip>
      </div>

      <!-- 上一节点处理结果 -->
      <div
        v-if="approve?.log && approve.log.length > 0 && approveShow"
        ref="approveDom"
        style="
          position: relative;
          background: var(--color-fill-1);
          border: 1px dashed var(--color-primary-3);
          border-radius: 6px;
          padding: 8px 12px;
          margin-top: 8px;
        "
      >
        <div
          style="
            height: 20px;
            font-weight: 500;
            font-size: 14px;
            color: var(--color-text-2);
            line-height: 20px;
          "
        >
          {{ approve.nodeName }}
        </div>
        <div
          @click="$emit('toggle-approve')"
          style="
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            height: 24px;
            background: var(--color-fill-2);
            border-radius: 0px 5px 0px 11px;
            padding: 4px 10px;
            color: var(--color-text-2);
            line-height: 16px;
            font-size: 12px;
          "
        >
          {{ !approveShow ? "详情" : "折叠" }}
          <svg
            class="icon"
            style="
              transform: rotate(180deg);
              font-size: 12px;
              line-height: 20px;
            "
            aria-hidden="true"
          ></svg>
        </div>
        <div class="scroll-container" style="max-height: 170px">
          <div
            v-for="(ai, idx) in approve.log"
            :key="idx"
            style="margin-top: 8px"
          >
            <div style="display: flex; margin-bottom: 6px">
              <div style="margin-right: 4px">
                <img
                  style="width: 20px; height: 20px; margin-right: 5px"
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                />
              </div>
              <div
                style="
                  margin-right: 8px;
                  color: var(--color-text-1);
                  font-size: 14px;
                  line-height: 22px;
                "
              >
                {{ ai.user_name }}
              </div>
              <div
                style="
                  font-size: 12px;
                  line-height: 21px;
                  color: var(--color-text-3);
                "
              >
                {{ ai.complete_date }}
              </div>
            </div>
            <div style="display: flex; margin-left: 30px">
              <div
                style="
                  text-align: end;
                  width: 45px;
                  font-size: 14px;
                  color: var(--color-primary-6);
                  line-height: 20px;
                  margin-right: 4px;
                "
              >
                {{ ai.approvalResult }}
              </div>
              <div
                v-if="ai.approvalComments"
                class="titleUtils"
                style="
                  color: var(--color-text-3);
                  line-height: 20px;
                  font-size: 14px;
                "
              >
                ({{ ai.approvalComments }})
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 详情 Tabs -->
      <div style="display: flex; flex-direction: column; flex: 1; min-width: 0">
        <a-tabs
          :active-key="innerActiveKey"
          default-active-key="1"
          force-render
          @change="(k) => $emit('change-tab', k)"
          :style="{ width: '100%' }"
        >
          <a-tab-pane key="1">
            <template #title>
              <span style="font-size: 13px" class="bold-tab">节点详情</span>
            </template>
            <div
              class="scroll-container"
              style="padding: 10px 20px; margin-top: 12px; height: 527px"
            >
              <FormRenderer
                v-if="appVisible"
                :schema="approVal?.dataObj"
                v-model="approVal.form"
              />
            </div>
            <a-divider style="margin: 10px 0px 0px 0px" />
            <div
              style="
                height: 50px;
                display: flex;
                align-items: center;
                margin-bottom: -8px;
              "
            >
              <a-button
                v-if="approvalButton?.length > 0"
                v-for="(btn, key) in approvalButton"
                :key="key"
                :type="buttonMap[btn.value]?.type"
                :ghost="buttonMap[btn.value]?.ghost"
                style="margin: 5px"
                :class="getButtonClass(buttonMap[btn.value]?.type)"
                @click="$emit('submit', btn)"
              >
                <svg
                  v-if="buttonMap[btn.value]?.icon"
                  class="icon"
                  style="font-size: 14px; margin-right: 8px"
                  aria-hidden="true"
                >
                  <use :xlink:href="`#${buttonMap[btn.value]?.icon}`" />
                </svg>
                {{ btn.value }}
              </a-button>
              <a-button
                v-if="approvalButton?.length == 0"
                type="primary"
                @click="$emit('submit', { key: '提交', value: '提交' })"
              >
                <template #icon><icon-send /></template>
                提交
              </a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title>
              <span style="font-size: 13px" class="bold-tab">流转记录</span>
            </template>
            <home-timeline
              v-if="fromList.length > 0"
              style="height: 580px"
              ref="timeline"
              :fromList="fromList"
              :participate="participate"
            />
          </a-tab-pane>
          <a-tab-pane v-if="showFlow" key="3">
            <template #title>
              <span style="font-size: 13px" class="bold-tab">流程图</span>
            </template>
            <div>
              <a-spin :loading="wokflowSpinning">
                <processSvg
                  v-if="!wokflowSpinning"
                  ref="fow"
                  :nodekeyMap="nodekeyMap"
                  :styleData="styleData"
                />
              </a-spin>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div
      v-else
      class="notData"
      style="padding: 10px; height: 680px; align-items: center"
    ></div>
  </div>
</template>

<script>
import OverflowText from "@/views/dashboard/workplace/OverflowText.vue";
import FormRenderer from "@/components/Form/FormRenderer.vue";
export default {
  name: "TaskDetail",
  components: { OverflowText, FormRenderer },
  props: {
    select: { type: Object, default: null },
    approve: { type: Object, default: () => ({}) },
    approveShow: { type: Boolean, default: false },
    innerActiveKey: { type: String, default: "1" },
    appVisible: { type: Boolean, default: false },
    approVal: { type: Object, default: () => ({}) },
    approvalButton: { type: Array, default: () => [] },
    buttonMap: { type: Object, default: () => ({}) },
    fromList: { type: Array, default: () => [] },
    participate: { type: Boolean, default: false },
    showFlow: { type: Boolean, default: false },
    wokflowSpinning: { type: Boolean, default: false },
    nodekeyMap: { type: Object, default: () => ({}) },
    styleData: { type: Object, default: () => ({}) },
    dateFormatter: { type: Function, required: true },
    getButtonClass: { type: Function, required: true },
  },
  emits: ["toggle-approve", "change-tab", "submit"],
  methods: {
    async uploadInitlist(param) {
      // 转发给内部 form-model 组件
      return await this.$refs?.[this.approVal.ref]?.uploadInitlist?.(param);
    },
    async formModelOk(...args) {
      // 转发提交检查
      return await this.$refs?.[this.approVal.ref]?.formModelOk?.(...args);
    },
  },
};
</script>
